<template>
  <div class="list-common-tab">
    <el-row :gutter="20">
      <el-col :span="18">
        <el-input
          v-model="search"
          placeholder="请输入检索内容"
          @keyup.enter="handleSearch"
          input-style="padding-right:30px"
        />
      </el-col>
      <el-col :span="6" class="operation-container">
        <el-button type="primary" @click="handleSearch">检索</el-button>
        <el-button type="info" @click="handleClear">清空</el-button>
        <el-button type="primary" @click="handleCreateCode">新建</el-button>
      </el-col>
    </el-row>
    <div class="star-table-container">
      <el-table
        :data="codeList"
        :stripe="stripe"
        :max-height="listHeight"
      >
        <el-table-column prop="codeText" label="代码名称" />
        <el-table-column prop="codeValue" label="代码值" />
        <el-table-column prop="typeText" align="center" label="代码类型" width="120"/>
        <el-table-column prop="showOrder" align="center" label="排序" width="80" />
        <el-table-column prop="op" align="center" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" @click="handleCodeManager(scope)" >操作</el-button>
            <el-popconfirm :title="showContent(scope)" width="200" @confirm="handleRemoveCode(scope)">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="star-table-pagination">
      <el-pagination
        background
        :total="listTotal"
        :layout="pageOperate"
        :default-page-size="size"
        :page-sizes="listPageSizes"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        v-model:current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
      center
      draggable
      title="代码管理"
      destroy-on-close
      v-model="visibleForm"
      :close-on-click-modal="false"
    >
      <code-form :id="codeId" :fid="props.fid" @close-dialog="closeDialog" @reload-data="reloadData"></code-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import CodeForm from '@/views/system/code/CodeForm'
import { ref, onMounted, watch, computed } from 'vue'
import { stripe, size, pageOperate, listPageSizes } from '@/config/list'
import { loadCodeListByFid, deleteCode } from '@/api/system/code/CodeManager'

import '@/style/list.less'

const search = ref('')
const codeId = ref('')
const codeList = ref([])
const listTotal = ref(0)
const pageSize = ref(size)
const currentPage = ref(1)
const visibleForm = ref(false)
const emit = defineEmits(['change-data'])
const props = defineProps({ fid: String, id: String })

const listHeight = computed(() => {
  return 'calc(100vh - 285px)'
})

const handleSearch = () => {
  currentPage.value = 1
  loadListData()
}

const handleClear = () => {
  currentPage.value = 1
  search.value = ''
  loadListData()
}

const handleCodeManager = (scope) => {
  codeId.value = scope.row.id
  visibleForm.value = true
}

const handleRemoveCode = (scope) => {
  deleteCode(scope.row.id, scope.row.type).then(() => {
    ElMessage({
      message: '删除成功！',
      type: 'success',
      duration: 800
    })
    reloadData()
  }).catch(error => {
    ElMessage.error(error.message)
  })
}

const handleCreateCode = () => {
  codeId.value = ''
  visibleForm.value = true
}

const closeDialog = () => {
  visibleForm.value = false
}

const reloadData = () => {
  loadListData()
  emit('change-data')
}

const showContent = computed(() => (scope) => {
  return `是否要删除${scope.row.codeText}？`
})

const loadListData = () => {
  loadCodeListByFid({
    fid: props.fid,
    current: currentPage.value,
    pageSize: pageSize.value,
    search: search.value
  }).then(data => {
    const { list, total } = data
    codeList.value = list
    listTotal.value = total
  })
}

const handleSizeChange = () => {
  loadListData()
}

const handleCurrentChange = () => {
  loadListData()
}

watch(
  () => props.fid,
  () => {
    currentPage.value = 1
    search.value = ''
    loadListData()
  }
)

watch(
  () => props.id,
  () => {
    if (props.id) {
      codeId.value = props.id
      visibleForm.value = true
    }
  }
)

onMounted(() => {
  loadListData()
})
</script>
